<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted} from 'vue'
import { Pie } from '@antv/g2plot';

const props = defineProps({
  data:Object
})

onMounted(()=>{
  const piePlot = new Pie('container', {
  appendPadding: 90,
  data:props.data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  label: {
    type: 'spider',
    offset: 100,
    content: '{name}',
    style: { fontSize: 26 },
  },
  color: ['#1a81f7', '#ec3f13'],
  innerRadius: 2,
  interactions: [{ type: 'element-active' }],
  pieStyle: {
    lineWidth: 2,
  },
  legend: {
    layout: 'vertical',
    position: 'topLeft',
  }
});

piePlot.render();
})
</script>

<style lang="less" scoped>
  #container {
    width: 100%;
    height: 300px;
  }
</style>

